<template>
	<view class="container-bottom-btns">
		<view class="add-compare-btn flex-xy-center" @tap="addCompareDevice">
			<u-icon name="plus" color="#FE5A13" size="30" :bold="true"></u-icon>
			<text>添加设备</text>
		</view>

		<u-swipe-action>
			<u-swipe-action-item ref="item" :options="options" v-for="(item, index) in productList" :key="index"  :name="item.productId"  @click="deleteProductDiff"> 
				<view class="product-item flex-y-center" @tap="toggleRadio(item, index)">
					<image :src="`/static/images/icon-radio-${item.checked ? '1' : '0'}.png`" mode="" class="radio"></image>
					<view class="product-info">
						<image src="static/images/icon-rent-out.png" class="cover" mode=""></image>
						<view class="right-info">
							<view class="name">{{item.productTitle}}</view>
							<view class="price">{{item.showPrice | formatMoney}}</view>
						</view>
					</view>
				</view>
			</u-swipe-action-item>
		</u-swipe-action>
		
		<view class="bottom-btn-wrapper">
			<SubmitBtn text="开始对比" @tap="toCompare"></SubmitBtn>
		</view>
	</view>
</template>

<script>
	import colorGradient from '../../uni_modules/uview-ui/libs/function/colorGradient';
import { toast } from '../../utils/uni-api';
import { productDiffList, deleteProductDiff, getDiffResult } from '@/api/product.js'
	export default {
		data() {
			return {
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#F42D1F',
					}
				}],
				productList: []
			}
		},
		onShow(){
			this.productDiffList()
		},
		methods: {
			toggleRadio(item, index){
				console.log(item);
				this.$set(this.productList[index], 'checked', !item.checked)
			},
			productDiffList(){
				productDiffList().then(res => {
					res.result.forEach(item => {
						item.checked = false
					})
					this.productList = res.result
				})
			},
			addCompareDevice(){
				this.$myUni.navTo('/pages/product/list-product?from=compare&putType=1')
			},
			toCompare(){
				const choosedProduct = this.productList.filter(item => item.checked)
				console.log(choosedProduct);
				if(choosedProduct.length < 2){
					return toast('请选择要对比的设备')
				}
				const ids = choosedProduct.map(item => item.productId).join(',')
				getDiffResult({productIds: ids}).then(res => {
					setTimeout(() => {
						this.$myUni.navTo('/pages/product/detail-compare?ids=' + ids)
					}, 400)
				})
			},
			deleteProductDiff(e){
				deleteProductDiff({productId: e.name}).then(res => {
					toast('删除成功', true)
					setTimeout(() => {
						this.productList = []
						this.$refs.item.forEach(item => item.closeHandler(true))
						this.productDiffList()
						
					}, 800)
				})
			}
			
		}
	}
</script>

<style lang="scss">
	.container-bottom-btns {
		background-color: #fff;

	}

	.add-compare-btn {
		width: 692rpx;
		height: 101rpx;
		margin: 30rpx;
		background: #FFF5F0;
		border-radius: 19rpx 19rpx 19rpx 19rpx;
		font-weight: bold;
		font-size: 31rpx;
		color: $theme-color;

		text {
			margin-left: 20rpx;
		}
	}
	
	.product-item{
		padding:20rpx 30rpx;
		
		
		.radio{
			width: 38rpx;
			height: 38rpx;
			margin-right: 20rpx;
		}
		
		.product-info{
			display: flex;
			flex:1;
			
			.cover{
				width: 260rpx;
				height: 180rpx;
				border-radius: 10rpx;
			}
			
			.right-info{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				font-weight: 400;
				color: #222222;
				font-size: 31rpx;
				padding: 10rpx 0;
				margin-left: 20rpx;
				
				
				.price{
					color: #FF3634;
				}
			}
		}
	}
</style>